<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="yls">
    <title>信息输入界面</title>
    <link rel="stylesheet" href="/css/site.min.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <script src="/js/jquery-1.11.3.js"></script>
    <script src="/js/bootstrap.min.js"></script>
</head>
<body>
<a href='javascript:void(0);' onclick="logOut()" class='close'
   style="height:3em;float: right;margin-right: 5%;padding-top: 8px;">退出</a>
<!--<a href="order" type="button" class="btn btn-primary close_1"-->
<!--style="margin-left:5%;float:left;width:8em;height:3em;padding-top: 8px;">订单管理-->
<!--</a>-->
<!--信息输入界面-->
<h2 style="text-align: center; color: #ff4d4d;">输入信息</h2>

<div class="container" style="margin-top: 105px;background-color:#ff4d4d;border-radius:10px;color: #000;">
    <form action="order" method="post">
        <span>基本信息</span>

        <div>
            <table class="table">
                <tr>
                    <td>
                        <lable>区&nbsp;&nbsp;&nbsp;&nbsp;域:
                            <select name="areaID" id="areaID">
                                <% for(var i = 0;i < areaList.length;i++){ %>
                                <option value="<%= areaList[i][0] %>"><%= areaList[i][1] %></option>
                                <% } %>
                            </select></lable>
                    </td>
                    <td>
                        <lable>支付类型:
                            <select name="payway" id="payway">
                                <option>货到付款</option>
                                <option>线上付款</option>
                            </select></lable>
                        <select name="THZ" id="THZ">
                            <option value="0">正常订单</option>
                            <option value="1">退货</option>
                            <option value="2">换货</option>
                            <option value="3">赠品</option>
                        </select></lable>
                    </td>
                    <td>
                        <lable>订单金额:
                            <input type="text" id="total" name="total" required placeholder="请输入订单金额"/><span
                                    style="display:none; color: red;">*</span></lable>
                    </td>
                </tr>
                <tr>
                    <td>
                        <lable>收货人:
                            <input type="text" id="name" name="name" required placeholder="请输入收货人姓名"/></lable>
                    </td>
                    <td>
                        <lable>联系电话:
                            <input type="tel" id="phone" name="phone" required placeholder="请输入联系电话"/><span
                                    style="display:none;color: red;">*</span></lable>
                    </td>
                    <td>
                        <lable>收获地址:
                            <input type="text" id="address" name="address" style="width: 22em;" required
                                   placeholder="请输入地址"/></lable>
                    </td>
                </tr>
            </table>
        </div>
        <!--输入信息关键字段-->
        <div class="row">
            <div class="col-md-2 col-xm-2 col-xs-2">
                <!--areaId（区域编号，隐藏）-->
                <!--uid(商家编号，隐藏)-->
            </div>
            <div class="col-md-4 col-xs-4 col-xm-4">
                <!--payway-->
            </div>
            <div class="col-md-6 col-xs-6 col-sm-6">
                <!--total-->
            </div>
        </div>


        <!--输入信息关键字段-->
        <div class="row">
            <div class="col-md-3 col-xs-3 col-sm-3"></div>
            <!--name-->
            <div class="col-md-3 col-xs-3 col-sm-3"></div>
            <!--phone-->
            <div class="col-md-6 col-xs-6 col-sm-6"></div>
            <!--address-->
        </div>
        <span>商品信息</span>

        <div class="input">
            <div class="table-responsive">
                <table class="table  table-hover" style="border-collapse: collapse;margin-left:-15px;">
                    <thead>
                    <tr class="ui-widget-header ">
                        <th style="width:15%;padding-left:1em">关键词:</th>
                        <th style="width:20%;padding-left:1.5em">自助选择:</th>
                        <th style="width:10%;padding-left:1.5em">商品名:</th>
                        <th style="width:10%;padding-left: 1.5em">规&nbsp;&nbsp;&nbsp;格:</th>
                        <th style="width: 10%;padding-left: 1.5em">数&nbsp;&nbsp;&nbsp;量:</th>
                        <th style="width:10%;padding-left: 1.5em">单&nbsp;&nbsp;&nbsp;价:</th>
                        <th style="width: 10%;padding-left: 1.5em">
                            <img src="images/u58.png" id="addspec" type="button" value="增加一个输入框"
                                 style="cursor: pointer;padding-left: 8px" class="insertbutton"/>
                        </th>
                    </tr>
                    </thead>
                    <tbody id="tbodyspec">
                    <tr style="height: 1em;color: #000;">
                        <td  style="width:15%"><input type="text" value="" style="width:120px;margin-left:1em;" onkeyup="clearSelect(event)"/></td>
                        <td style="width:20%"><select name="slAuto" onclick="selectProduct(event)"
                                                      onchange="selectOption(event)"
                                                      style="margin-left: 1em; width: 15em;height: 26px;">
                                <option value="default">-请选择-</option>
                            </select></td>
                        <td style="width:15%"><input style="margin-left: 1em" type="text" class="pname"
                                                     placeholder="商品名" readonly/></td>
                        <td style="width:15%"><input style="margin-left: 1em;width:80px;" type="text" class="sname"
                                                     placeholder="规格" readonly/></td>
                        <td style="width:10%"><input style="margin-left: 1em;width:80px;" type="number" min="1" class="size"
                                                     placeholder="数量" onblur="countChange()"/></td>
                        <td style="width:10%"><input style="margin-left: 1em; width: 80px;" type="text" class="price"
                                                     placeholder="单价" readonly/></td>
                        <td style="width:10%"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div>
                <lable><span style="display: block;">备&nbsp;&nbsp;&nbsp;&nbsp;注:</span>
                    <textarea type="text" name="orderRemark" placeholder="请输入备注信息"
                              style="margin-top: 1%;width:30em;margin-left: 4.5em;height: 5em;"></textarea></lable>
            </div>
        </div>
        <input id="hidShopName" name="shopName" type="hidden" value=""/>
        <input id="hidGoods" name="goodsInfo" type="hidden" value=""/>
        <a id="goBack" class="btn btn-primary navbar-right close_1" onclick="history.go(-1)"
           style="margin-right: 5%;margin-top: 5%;margin-bottom: 1%;height:40px;" type="submit" value="">返回</a>
        <input id="btnSubmit" class="btn btn-primary navbar-right close_1" onclick="return checkInput()"
               style="margin-right: 5%;margin-top: 5%;margin-bottom: 1%;height:40px;" type="submit" value="提交">
        <input type="hidden" id="hidProducts" value="<%= productList == undefined ? "" : productList %>"/>
    </form>
</div>
<script>
    $(document).ready(function () {
        $('#addspec').click(function () {
            var html = '<tr><td  style="width:15%"><input type="text" value="" style="width:120px;margin-left:1em;" onkeyup="clearSelect(event)"/></td><td style="width:20%"><select name="slAuto" onclick="selectProduct(event)"  onchange="selectOption(event)" style="margin-left:1em; width: 15em;height: 26px;"><option value="default">-请选择-</option></select></td><td style="width: 15%"><input style="margin-left: 1em" type="text" class="pname" placeholder="商品名" readonly/></td><td><input type="text"  style="margin-left: 1em;width:80px;" class="sname" placeholder="规格" readonly/></td><td style="width: 15%"><input style="margin-left: 1em;width:80px;" type="number" min="1" class="size" onblur="countChange()" placeholder="数量"/></td><td style="width: 10%"><input style="margin-left: 1em;width: 80px;" type="text" class="price" placeholder="单价" readonly/></td><td style="width: 10%"><img src="images/u64.png" href="#"  style="margin-left: 1.5em;" class="trdelspec"></td></tr>';
            $('#tbodyspec').append(html);
            $('.trdelspec').bind("click", function () {
                $(this).parent().parent().remove();
            });
            $("select[name=slAuto]").click();
        });
        $("#btnSubmit").click(function () {})
        $("select[name=slAuto]").click();
    });
    function clearSelect(event){
        event = event ? event : window.event;
        var obj = event.srcElement ? event.srcElement : event.target;
        var keyWord = $(obj).val();
        if(keyWord!=""){
            $("td:eq(1) select option:not(:first)", $(obj).parents("tr")).remove();
        }
    };
    function selectProduct(event) {
        event = event ? event : window.event;
        var obj = event.srcElement ? event.srcElement : event.target;
        var keyWord = $("input:first", $(obj).parents("tr")).val();
        if ($(obj).val() == "default") {
            $("option:not(:first)", $(obj)).remove();
            var productList = $("#hidProducts").val();
            productList = JSON.parse(productList);
            var option = "";
            for (var i = 0; i < productList.length; i++) {
                if (keyWord == "" || productList[i].pName.indexOf(keyWord) >= 0) {
                    option += "<option value='" + productList[i].id + "'>" + productList[i].pName + "[" + productList[i].specName + "]" + "</option>";
                }
            }
            $(obj).append(option);
        }
    }

    function selectOption(event) {
        event = event ? event : window.event;
        var obj = event.srcElement ? event.srcElement : event.target;
        var pId = $(obj).val();
        var productList = $("#hidProducts").val();
        productList = JSON.parse(productList);
        for (var i = 0; i < productList.length; i++) {
            if (productList[i].id == pId) {
                $(".pname", $(obj).parents("tr")).val(productList[i].pName);
                $(".sname", $(obj).parents("tr")).val(productList[i].specName);
                $(".size", $(obj).parents("tr")).val(1);
                $(".price", $(obj).parents("tr")).val(productList[i].price);
            }
        }
        var totalPrice = 0;
        $("#tbodyspec tr").each(function () {
            var price = $(".price", $(this)).val();
            totalPrice += parseFloat(price);
        })
        $("#total").val(totalPrice);
    }

    function countChange() {
        var totalPrice = 0;
        $("#tbodyspec tr").each(function () {
            var price = $(".price", $(this)).val();
            var size = $(".size", $(this)).val();
            totalPrice += parseFloat(price) * parseFloat(size);
        })
        totalPrice = Math.round(totalPrice * 100) / 100;
        $("#total").val(totalPrice);
    }

    function checkInput() {
        //将区域字段的店铺名称存入隐藏域中
        var shopName=$("#areaID").find("option:selected").text();
        $("#hidShopName").val(shopName);
        //验证
        var phone = $("#phone").val();
        var regPhone = /[\d]{11}/;
        if (!regPhone.test(phone)) {
            $("#phone").focus();
            $("#phone+span").show();
            return false;
        } else {
            $("#phone+span").hide();
        }

        var goodsInfo = "";
        var flag = true;
        $("#tbodyspec tr").each(function () {
            var pname = $(".pname", $(this)).val();
            var sname = $(".sname", $(this)).val();
            var size = $(".size", $(this)).val();
            var price = $(".price", $(this)).val();
            if (pname != "" || sname != "" || size != "" || price != "") {
                if (pname == "" || sname == "" || size == "" || price == "") {
                    flag = false;
                    return;
                }
            }
            goodsInfo += pname + "," + sname + "," + size + "," + price + ";";
        })
        if (goodsInfo.length > 1) {
            goodsInfo = goodsInfo.substring(0, goodsInfo.length - 1);
            $("#hidGoods").val(goodsInfo);
        } else {
            alert("请至少添加一条商品或商品数量有误");
            return false;
        }
        if (flag == false) {
            alert("商品信息不完整或数量有误");
            return false;
        } else {
            $("#tbodyspec tr").each(function () {
                var size = $(".size", $(this)).val();
                var regNum = /\d+(\.\d+)?/;
                if (!regNum.test(size)) {
                    $(".size", $(this)).focus();
                    flag = false;
                    return;
                }
                if (parseInt(size) < 1) {
                    $(".size", $(this)).focus();
                    flag = false;
                    return;
                }
            })
            if (flag == false) {
                alert("商品信息有误或数量应为数字且不应小于1");
                return false;
            }
        }

        if($("#THZ").find("option:selected").text()=="退货"){
            if(parseFloat($("#total").val())>0){
                alert("为了记账准确，退货总金额应为负值");
                return false;
            }
        }

        var total = $("#total").val();
        var regNum = /\d+(\.\d+)?/;
        if (!regNum.test(total)) {
            $("#total").focus();
            $("#total+span").show();
            return false;
        } else {
            $("#total+span").hide();
        }
    }
    function logOut() {
        top.location.href = "../../index/9999";
    }
</script>

<!--<form action="order" method="post">-->
<!--<input name="txtOrderNum" type="text" value=""/>-->
<!--<input name="txtDescription" type="text" value=""/>-->
<!--<input type="submit" value="submit"/>-->
<!--</form>-->
</body>
</html>
